<template>
    <div>
        <!-- 顶部搜索栏 -->
        <div style="background-color: #c67120;position: relative;">
            <van-row>
                <van-col span="18">
                    <van-search v-model="value" clear-trigger="always" placeholder="请输入搜索关键词" background="#c67120" />
                </van-col>
                <van-col span="6">
                    <div class="bt1">
                        <van-icon @click="search" name="search" size="30px" color="#fff" style="padding-top: 12px;margin: 0 0 0 5px;"/>
                        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
                            <van-area title="标题" :area-list="areaList" />
                        </van-popup>
                        <van-icon name="envelop-o" @click="goMessage" size="30px" color="#fff" style="padding-top: 4.5px;margin: 0 0 0 10px;" />
                    </div>
                </van-col>
            </van-row>
            <table class="table" v-show="show1">
                <tbody>
                    <tr v-for="(item,i) in tableData" :key="i">
                    <td>{{ item.name }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div>
            <van-row style="margin-top: 15px;">
                <van-col span="8" align="center">
                    <van-button
                    :icon="require(`@/assets/kefu.png`)"
                    size="18"
                    style="height: 30px;"
                    round type="default"
                    @click="gwc">
                    我的订单
                    </van-button>
                </van-col>
                <van-col span="8" align="center">
                    <van-button
                    :icon="require(`@/assets/gouwudai.png`)"
                    size="20"
                    style="height: 30px;"
                    round type="default"
                    @click="kefu">
                    客服中心
                    </van-button>
                </van-col>
                <van-col span="8" align="center">
                    <van-button
                    :icon="require(`@/assets/hd.png`)"
                    size="20"
                    style="height: 30px;"
                    round type="default"
                    @click="lotterydraw">
                    新用户活动
                    </van-button>
                </van-col>
            </van-row>
        </div>
        <!-- 轮播组件 -->
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item>
                <img :src="require(`../../assets/lbt1.jpeg`)" alt="" style="width: 100%;">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="require(`../../assets/lbt2.jpg`)" alt="" style="width: 100%;">
            </van-swipe-item>
        </van-swipe>
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item>
                <img :src="require(`../../assets/lbt3.png`)" alt="" style="width: 100%;">
            </van-swipe-item>
            <van-swipe-item>
                <img :src="require(`../../assets/lbt4.png`)" alt="" style="width: 100%;">
            </van-swipe-item>
        </van-swipe>

        <div class="crd1">
            <div class="crd2">
                <span style="color: black;font-weight: 900;margin-left: 10px;">限时特惠</span>
                <span style="color: black;margin-left: 100px;font-size: 10px;">优惠升级 限时抢购</span>
                <div>
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                </div>
            </div>
        </div>
        <div class="crd1">
            <div class="crd2">
                <span style="color: black;font-weight: 900;margin-left: 10px;">限时特惠</span>
                <span style="color: black;margin-left: 100px;font-size: 10px;">优惠升级 限时抢购</span>
                <div>
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                    <img src="../../assets/lbt1.jpeg" alt="" style="width: 45%;margin:2%;margin-left: 9px;border-radius: 5px;">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import httpApi from '@/http';
    export default {
        data() {
            return {
                areaList,
                value: '',
                show: false,
                show1:false,
                tableData:[
                    { name: '日常保洁(两小时)' },
                    { name: '全屋大扫除' },
                    { name: '除菌保洁(一居室)' },
                    { name: '做饭钟点工(三小时)' },
                    { name: '空调清洗(一台)' },
                    { name: '擦玻璃(一平米)' },
                    { name: '洗衣机清洗(一台)' },
                    { name: '冰箱清洗(一台)' },
                    { name: '布艺沙发清洗(一座)' },
                    { name: '窗帘清洗(宽度小于三米)' },
				],
                //表格B用原表格的数据
                tableDataB: [
                { name: '日常保洁(两小时)' },
                    { name: '全屋大扫除' },
                    { name: '除菌保洁(一居室)' },
                    { name: '做饭钟点工(三小时)' },
                    { name: '空调清洗(一台)' },
                    { name: '擦玻璃(一平米)' },
                    { name: '洗衣机清洗(一台)' },
                    { name: '冰箱清洗(一台)' },
                    { name: '布艺沙发清洗(一座)' },
                    { name: '窗帘清洗(宽度小于三米)' },
                ],
            }
        },
        methods: {
            showPopup() {
                this.show = true;
            },
            lotterydraw(){
                this.$router.push('/lotterydraw')
            },
            goMessage(){
                this.$router.push('/message')
            },
            kefu(){
                this.$router.push('/customer')
            },
            gwc(){
                this.$router.push('/shoppingCart')
            },
            selectValue(){
                let params = {value:this.keyword}
                httpApi.serveApi.selectValueByName(params).then(res =>{
                    console.log(res.data.data)
                    this.list = res.data.data
                })
            },
            search() {
                //表格用原表格的数据 即 用于搜索的总数据
                this.tableData = this.tableDataB;
                //获取到查询的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
                let _search = this.value;
                let newListData = []; // 用于存放搜索出来数据的新数组
                if (_search) {
                    //filter 过滤数组
                    this.tableData.filter((item) => {
                    // newListData中 没有查询的内容，就添加到newListData中
                    if (
                        item.name.indexOf(_search) !== -1
                    ) {
                        newListData.push(item);
                    }
                    });
                }
                //查询后的表格 赋值过滤后的数据
                this.tableData = newListData;
                this.show1 = true
            },
        },
        mounted () {
            
        },
    }
</script>

<style lang="scss" scoped>
.my-swipe {
    width: 100%;
    margin-top: 10px;
}
.my-swipe .van-swipe-item {
    margin: auto;
    // background-color: red;
}
.crd1 {
    width: 100%;
    height: 250px;
    // background-color: #f1f3f4;
    margin-top: 20px;
    color: #f1f3f4;
    
}
.crd2 {
    width: 90%;
    margin: 0 5% 0 5%;
    background-color: #fdd19f;
    border-radius: 5px;
}
.table {
    width: 80%;
    background-color: rgb(255, 255, 255,0.5);
    margin-left: 12px;
    position: absolute;
    z-index: 999;
}
</style>